<template>
    <div>
        <h3>实施轨迹{{vinCode }}</h3>

        <el-button icon=" el-icon-refresh-right" circle  @click="start()"  ></el-button>
        <div class="c1">
            <div class="d1">
                <div id="container"></div>

            </div>
            <div class="d2">
                <h3>车辆转速</h3>
                <div ref="chart1" style="height: 450px; width: 450px"></div>
         </div>
            <div class="d3">

                <h3>电池电机管理</h3>
                <div ref="chart2" style="height: 200px; width: 450px"></div>
                <div ref="chart3" style="height: 200px; width: 450px"></div>
            </div>
      </div>
      <div class="d4">
        <div>
          <el-descriptions  title="" direction="vertical" :column="10" border>
            <el-descriptions-item label="电机控制温度" prop="controlTemperature">{{ form1.controlTemperature }}</el-descriptions-item>
            <el-descriptions-item label="电机转速">{{ form1.rev }}</el-descriptions-item>
            <el-descriptions-item label="电机转矩" :span="1">{{ form1.torque }}</el-descriptions-item>
            <el-descriptions-item label="电机温度" style="width: 10px;">{{ form1.temperature }}</el-descriptions-item>
            <el-descriptions-item label="电机电压">{{ form1.voltage }}</el-descriptions-item>
            <el-descriptions-item label="电机电流" :span="1">{{ form1.electricity }}</el-descriptions-item>
            <el-descriptions-item label="动力电池剩余电量" style="width: 10px;">{{ form1.surplusElectricity }}</el-descriptions-item>
            <el-descriptions-item label="最大反馈功率  ">{{ form1.maxFeedbackPower }}</el-descriptions-item>
            <el-descriptions-item label="最大电功率" :span="1">{{ form1.maxElectricPower }}</el-descriptions-item>
            <el-descriptions-item label="BMS自检计数器" :span="1">{{ form1.bmsCount }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div>
          <el-descriptions title="" direction="vertical" :column="10" border>
            <el-descriptions-item label="动力电池充放电电流 ">{{ form2.chargeDischargeCurrent }}</el-descriptions-item>
            <el-descriptions-item label="动力电池负载端总电压">{{ form2.totalVoltage }}</el-descriptions-item>
            <el-descriptions-item label="单次最大电压" :span="1">{{ form2.maxVoltage }}</el-descriptions-item>
            <el-descriptions-item label="单次电池最低电压" style="width: 10px;">{{ form2.minVoltage }}</el-descriptions-item>
            <el-descriptions-item label="单体电池最高温度  ">{{ form2.maxTemperature }}</el-descriptions-item>
            <el-descriptions-item label="单体电池最低温度" :span="1">{{ form2.minTemperature }}</el-descriptions-item>
            <el-descriptions-item label="动力电池可用容量" style="width: 10px;">{{ form2.availableCapacity }}</el-descriptions-item>
            <el-descriptions-item label="里程">{{ form2.carMileage }}</el-descriptions-item>
            <el-descriptions-item label="总电压" :span="1">{{ form2.carTotalVoltage }}</el-descriptions-item>
            <el-descriptions-item label="总电源" :span="1">{{ form2.carTotalPowerSupply }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
  </template>

  <script>
  import axios from "axios";
  import {getSj} from "@/api/system/car";
  const echarts = require('echarts');
  var myChart1;
  export default{
    data () {
      return {
        num:0,
        wdList:[1],
        dyList:[2],
        sj:0,
        cs:'',
        cs2:'',
        data:'',
        vinCode:window.sessionStorage.getItem("vinCode"),
        map: null,
        marker: null,
        lineArr:
        [[116.401138,39.907765],[116.41133,39.909395],[116.410922,39.903551],[116.400451,39.902761]],
        form2:{},
        form1:{
          controlTemperature:"",
          rev:"",
          torque:"",
          temperature:"",
          voltage:"",
          electricity:"",
          surplusElectricity:"",
          maxFeedbackPower:"",
          maxElectricPower:"",
          bmsCount:"",
        },

      };
    },
    beforeDestroy() {
      this.map && this.map.destroy();
    },
    async created() {
    },
    methods: {
      getS(){
        getSj().then(resp=>{
           if (resp===100){
             this.sj=resp
           }
          if (resp===200){
            this.sj=resp
          }
        })
      },
      start(){
          // window.location.reload
          this.startAnimation();
      },
      initMap() {
        this.map = new AMap.Map("container", {
          resizeEnable: true,
          center: [116.397428, 39.90923],
          zoom: 17,
        });

        this.marker = new AMap.Marker({
          map: this.map,
          position:  this.lineArr[0],
          icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
          offset: new AMap.Pixel(-26, -15),
          autoRotation: true,
          angle: -90,
        });

        // 绘制轨迹
        let polyline = new AMap.Polyline({
          map: this.map,
          path: this.lineArr,
          showDir: true,
          strokeColor: "#28F", //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6, //线宽
          // strokeStyle: "solid"  //线样式
        });

        let passedPolyline = new AMap.Polyline({
          map: this.map,
          // path: this.lineArr,
          strokeColor: "#AF5", //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6, //线宽
          // strokeStyle: "solid"  //线样式
        });

        this.marker.on("moving", function (e) {
          passedPolyline.setPath(e.passedPath);
        });

        this.map.setFitView();
      },
      startAnimation() {
            this.marker.moveAlong(this.lineArr, 200);
      },
      pauseAnimation() {
        this.marker.pauseMove();
      },
      resumeAnimation() {
        this.marker.resumeMove();
      },
      stopAnimation() {
        this.marker.stopMove();
      },

      initCharts () {
         myChart1 = echarts.init(this.$refs.chart1);
        // 绘制图表
        myChart1.setOption({
            series: [
                    {
                      type: 'gauge',
                      min: 0,
                      max: 280,
                      axisLine: {
                        lineStyle: {
                          width: 30,
                          color: [
                            [0.3, '#67e0e3'],
                            [0.7, '#37a2da'],
                            [1, '#fd666d']
                          ]
                        }
                      },
                      pointer: {
                        itemStyle: {
                          color: 'inherit'
                        }
                      },
                      axisTick: {
                        distance: -30,
                        length: 8,
                        lineStyle: {
                          color: '#fff',
                          width: 2
                        }
                      },
                      splitLine: {
                        distance: -30,
                        length: 30,
                        lineStyle: {
                          color: '#fff',
                          width: 4
                        }
                      },
                      axisLabel: {
                        color: 'inherit',
                        distance: 40,
                        fontSize: 20
                      },
                      detail: {
                        valueAnimation: true,
                        formatter: '{value} km/h',
                        color: 'inherit'
                      },
                      data: [
                        {
                          value: 0
                        }
                      ]
                    }
                  ]
        });

      }
    },
    mounted () {
      this.getS();
      this.initCharts();
      this.initMap();

            setInterval(function () {
              myChart1.setOption({
                series: [
                  {
                    data: [
                      {
                        value: +(Math.random() * 180).toFixed(2)
                      }
                    ]
                  }
                ]
              });





            }, 2000);




        this.startAnimation();
        setInterval(async () => {
       let res1 = await axios.post(
          "https://www.fastmock.site/mock/e9fcfdbcc44370282580ec22710b095b/car/first"
        );

          this.form1 = res1.data.userInfo[0];
          this.wdList.push(res1.data.userInfo[0].controlTemperature)

          let myChart2 = echarts.init(this.$refs.chart2);
          // 绘制图表
          myChart2.setOption({
            title: { text: '电池温度' },
            tooltip: {},
            xAxis: {
              data: this.wdList
            },
            yAxis: {},
            series: [{
              name: '温度',
              type: 'bar',
              data:this.wdList
            }]
          });




          // if (this.sj===200){
          //   this.form1 =''
          // }
        let res2 = await axios.post(
          "https://www.fastmock.site/mock/e9fcfdbcc44370282580ec22710b095b/car/two"
        );

            this.form2 = res2.data.userInfo[0];
          this.dyList.push(res2.data.userInfo[0].maxTemperature)


          let myChart3 = echarts.init(this.$refs.chart3);
          // 绘制图表
          myChart3.setOption({
            title: { text: '电池电压' },
            tooltip: {},
            xAxis: {
              data: this.dyList,
            },
            yAxis: {},
            series: [{
              name: '电压',
              type: 'bar',
              data: this.dyList,
            }]
          });

          // if (this.sj===200){
          //   this.form2 =''
          // }
        // console.log( res1.data.userInfo[0])
      }, 1000);
    }
  }
  </script>

  <style>

  .c1 {

  border-color: rgba(6, 118, 210, 0.56);
  /* border-color: cornflowerblue; */
  width: 100%;
  height: 451px;
  display: flex;
  }
  .d1{
  border-style: solid;
  border-color: rgba(6, 118, 210, 0.56);
  /* border-color: cornflowerblue; */

  width: 33%;
  height: 450px;
  margin-bottom: 10px;
  padding-left: 10px;
  display: flex;
  }
  .d2{
  border-style: solid;
  border-color: rgba(6, 118, 210, 0.56);
  /* border-color: cornflowerblue; */

  width: 32%;
  height: 450px;
  margin-bottom: 10px;
  padding-left: 10px;
  }
  .d3{
  border-style: solid;
  border-color: rgba(6, 118, 210, 0.56);
  /* border-color: cornflowerblue; */

  width: 32%;
  height: 450px;
  margin-bottom: 10px;
  padding-left: 10px;
  }
  .d4{
  /* border-style: solid; */
  /* border-color: rgba(6, 118, 210, 0.56); */
  /* border-color: cornflowerblue; */

  width: 99%;
  height: 210px;
  margin-bottom: 10px;
  padding-left: 10px;
  }
  @import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");

  #container {
    height: 440px;
    width: 140%;
  }

  .input-card .btn {
    margin-right: 1.2rem;
    width: 9rem;
  }

  .input-card .btn:last-child {
    margin-right: 0;
  }
  </style>
